<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/animate4.1.1.min.css">
    <link rel="stylesheet" href="../../css/swiper-bundle.css">
    <link rel="stylesheet" href="../../css/index.css">
    <link rel="stylesheet" href="../../css/Head.css">
    <link rel="stylesheet" href="../../css/Admin.css">
    <title>长远首页</title>
</head>
<body>
<div id="App">
    <div id="Head">
        <div>
            <div class="head">
                <a @click="AdminLoginishow">
                    <img src="../../img/Logo.svg">
                </a>
                <!--大标题-->
                <ul>
                    <a v-for="(item,index) in headlineS">
                        <li @click="skip(index)"
                            :class="head_ul_li_hover==index?'head_ul_li_hover':''" :key="index">{{ item }}
                        </li>
                    </a>
                    <li class="nav-box" :class="nav_boxClass[head_ul_li_hover]"></li>
                </ul>
                <!-- 显示隐藏 小标题按钮     -->
                <div @click="hiddenBox =!hiddenBox" ref="btn-wrap" class="btn-wrap">
                    <p v-for="item in 3" :class="hiddenBox?btnWrapClass[item-1]:''" :key="item-1"></p>
                </div>
            </div>
            <!--小标题-->
            <transition-group
                    name=" animate__animated  "
                    enter-active-class="animate__fadeIn"
                    leave-active-class="animate__fadeOut">

                <div class="hiddenBox" v-show="hiddenBox" key="1">
                    <ul>
                        <a v-for="(item,index) in headlineS">
                            <li @click="skip(index)"
                                :class="head_ul_li_hover==index?'hiddenBoxLiHous':''" :key="index">{{ item }}
                            </li>
                        </a>
                    </ul>
                </div>
            </transition-group>
        </div>

    </div>
    <div class="MainContent">
        <div class="swiper">
            <div class="swiper-wrapper">

                <div class="swiper-slide">
                    <div class="MainContent_slide1">
                        <!-- PC端-->
                        <video id="MainContent_slide1_video" controls autoplay muted loop
                               src="../../img/apc.mp4"></video>
                        <!-- PC端结束-->

                        <!--移动端-->
                        <div class="MainContent_slide1_move ">
                            <p class="animate__animated animate__fadeInUp" style="animation-duration: 2s;">无限热爱</p>
                            <img class="animate__animated animate__fadeIn" src="../../img/a首页1移动端素材.png"
                            style="animation-delay: 1s ;animation-duration: 2s;">
                            <p class="animate__animated animate__fadeInUp" style="animation-delay: 2s; animation-duration: 2s">无限可能</p>
                        </div>
                        <!--移动端结束-->
                        <div class="MainContent_slide1_D">
                            <p onclick="swiper.slideNext()">向下滚动了解更多</p>
                            <img class="slideNext" onclick="swiper.slideNext()" src="../../img/a下一个图标.png">
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">

                    <div class="MainContent_slide2 ">
                        <div class="MainContent_slide2_D">
                            <div class="MainContent_slide2_D1">
                                <div>
                                    <img src="../../img/a首页2路径.png">
                                </div>
                                <div>
                                    <h1>长远创造·将想法变为现实</h1>
                                    <p>每一次灵感的迸发，每一次青春的绽放，都源自每一次不屈不挠的付出与奋斗</p>
                                </div>
                            </div>
                            <div class="MainContent_slide2_D2 animate__animated  animate__fadeInRight">
                                了解更多作品与创造
                            </div>
                            <div class="MainContent_slide2_D3">
                                <ul>
                                    <li class="animate__animated  animate__fadeInDown"><img
                                            src="../../img/a首页2手机1.png"></li>
                                    <li class="animate__animated  animate__fadeInUp"><img
                                            src="../../img/a首页2手机2.png"></li>
                                    <li class="animate__animated  animate__fadeInDown"><img
                                            src="../../img/a首页2手机3.png"></li>
                                    <li class="animate__animated  animate__fadeInUp"><img
                                            src="../../img/a首页2手机4.png"></li>
                                    <li class="animate__animated  animate__fadeInDown"><img
                                            src="../../img/a首页2手机5.png"></li>
                                </ul>
                            </div>

                            <div class="MainContent_slide2_swiper">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><img src="../../img/a首页2手机1.png"></div>
                                    <div class="swiper-slide"><img src="../../img/a首页2手机2.png"></div>
                                    <div class="swiper-slide"><img src="../../img/a首页2手机3.png"></div>
                                    <div class="swiper-slide"><img src="../../img/a首页2手机4.png"></div>
                                    <div class="swiper-slide"><img src="../../img/a首页2手机5.png"></div>
                                </div>
                            </div>

                        </div>
                        <img class="slideNext" onclick="swiper.slideNext()" src="../../img/a下一个图标.png">
                    </div>

                </div>

                <div class="swiper-slide">

                    <div class="MainContent_slide2 MainContent_slide3">
                        <div class="MainContent_slide2_D animate__animated animate__fadeInUp">
                            <div class="MainContent_slide2_D1">
                                <div>
                                    <img src="../../img/a首页3路径.png">
                                </div>
                                <div>
                                    <h1>长远少年·成长是一场团战</h1>
                                    <p>合作是柔和的力量，成长是智慧的绽放，当二者相遇，将创造无限可能的奇迹</p>
                                </div>
                            </div>
                            <div class="MainContent_slide2_D2 animate__animated  animate__fadeInRight">
                                走进长远少年的世界
                            </div>
                            <div class="MainContent_slide3_N">
                                <div class="MainContent_slide3_N_img">
                                    <!--<img src="../../img/a首页3n1.png">-->
                                    <div class="MainContent_slide3_N_img_swiper animate__animated animate__fadeInUp">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><img src="../../img/a首页3n1.png"></div>
                                            <div class="swiper-slide"><img src="../../img/a首页3n1.png"></div>
                                            <div class="swiper-slide"><img src="../../img/a首页3n1.png"></div>
                                            <div class="swiper-slide"><img src="../../img/a首页3n1.png"></div>
                                            <div class="swiper-slide"><img src="../../img/a首页3n1.png"></div>
                                            <div class="swiper-slide"><img src="../../img/a首页3n1.png"></div>
                                        </div>
                                        <div class="swiper-pagination MainContent_slide3_N_img_swiper-pagination"></div>
                                    </div>
                                </div>

                                <div class="MainContent_slide3_N_D animate__animated animate__fadeInUp">
                                    <h2>站在巨人的肩膀上做彼此的得力队友</h2>
                                    <p class="MainContent_slide3_N_D_p"
                                       title="在这个团队里，以项目为导向， 大家讨论、交流、学习、进步，分工协作开发高质量的真实的项目，分享技术和经验。平时再水水群、聊聊天，如果恰 好赶上了秋招，还能蹭上学长学 姐们一顿又一顿的offer饭！美滋滋~">
                                        在这个团队里，以项目为导向， 大家讨论、交流、学习、进步，
                                        分工协作开发高质量的真实的
                                        项目，分享技术和经验。
                                        平时再水水群、聊聊天，如果恰 好赶上了秋招，还能蹭上学长学 姐们一顿又一顿的offer饭！
                                        美滋滋~
                                    </p>
                                    <div class="MainContent_slide3_N_D_1 animate__animated animate__fadeInUp">
                                        <div>
                                            <h3>在校<span>成员数</span></h3>
                                            <p>9</p>
                                            <p>人</p>
                                        </div>
                                        <div>
                                            <h3>毕业 <span>成员数</span></h3>
                                            <p class="MainContent_slide3_N_D_1_p">9</p>
                                            <p>人</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <img class="slideNext" onclick="swiper.slideNext()" src="../../img/a下一个图标.png">
                    </div>
                </div>

                <div class="swiper-slide">

                    <div class="MainContent_slide2 MainContent_slide4">
                        <div class="MainContent_slide2_D ">
                            <div class="MainContent_slide2_D1">
                                <div>
                                    <img src="../../img/a首页4路径.png">
                                </div>
                                <div>
                                    <h1>长远导师·着眼未来与方向</h1>
                                    <p>日以继夜的坚守照亮前行的路程，愿你选择热爱的生活，愿生活将你温柔以待</p>
                                </div>
                            </div>
                            <div class="MainContent_slide2_D2 animate__animated  animate__fadeInRight">
                                了解长远的育人之道
                            </div>

                            <div class="MainContent_slide4_N">

                                <div class="MainContent_slide4_N_D animate__animated animate__fadeInUp">
                                    <ul class="swiper-wrapper">
                                        <li class="swiper-slide">
                                            <div><img src="../../img/a首页4n1.png"></div>
                                            <div><img src="../../img/a首页4n2.png"></div>
                                        </li>
                                        <li class="swiper-slide">
                                            <div><img src="../../img/a首页4n1.png"></div>
                                            <div><img src="../../img/a首页4n2.png"></div>
                                        </li>

                                    </ul>
                                </div>

                                <div class="MainContent_slide4_N_swiper animate__animated animate__fadeInUp">
                                    <div class="swiper-wrapper">

                                        <div class="swiper-slide">
                                            <div>
                                                <img src="../../img/a首页4n1.png">
                                            </div>
                                        </div>

                                        <div class="swiper-slide">
                                            <div>
                                                <img src="../../img/a首页4n2.png">
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>


                        </div>

                        <img class="slideNext" onclick="swiper.slideNext()" src="../../img/a下一个图标.png">
                    </div>

                </div>

                <div class="swiper-slide">

                    <div class="MainContent_slide2 MainContent_slide5">
                        <div class="MainContent_slide2_D ">
                            <div class="MainContent_slide2_D1">
                                <div>
                                    <img src="../../img/a首页5路径.png">
                                </div>
                                <div>
                                    <h1>加入长远·遇见更好的自己</h1>
                                    <p>分享知识和经验，开辟新机遇，用热爱创造无限可能，期待有才华有能力的你</p>
                                </div>
                            </div>

                            <div class="MainContent_slide5_N">


                                <div class="MainContent_slide5_N_D MainContent_slide5_N_D_S">
                                    <div class="swiper-wrapper">
                                        <ul class="swiper-slide">
                                            <li data="java,none"
                                                onmouseover="MainContent_slide5_N_D_li_1_mouseover(this)"
                                                class="MainContent_slide5_N_D_li_1">
                                                <div><img src="../../img/a首页5n1.png"></div>
                                                <div>
                                                    <h3>后端工程师</h3>
                                                    <p>负责工作室团队项目后端开发 工作，包含数据库设计与接口
                                                        设计、开发以及测试。</p>
                                                </div>
                                            </li>
                                            <li data="java,python"
                                                onmouseover="MainContent_slide5_N_D_li_2_mouseover(this)"
                                                class="MainContent_slide5_N_D_li_2">
                                                <div><img src="../../img/a首页5n2.png"></div>
                                                <div>
                                                    <h3>前端工程师</h3>
                                                    <p>负责工作室团队项目前端开发 工作，包含Web网站开发与移
                                                        动端小程序或APP设计与开发。</p>
                                                </div>
                                            </li>
                                        </ul>
                                        <ul class="swiper-slide">
                                            <li data="111,none"
                                                onmouseover="MainContent_slide5_N_D_li_1_mouseover(this)"
                                                class="MainContent_slide5_N_D_li_1">
                                                <div><img src="../../img/a首页5n1.png"></div>
                                                <div>
                                                    <h3>1111</h3>
                                                    <p>负责工作室团队项目后端开发 工作，包含数据库设计与接口
                                                        设计、开发以及测试。</p>
                                                </div>
                                            </li>
                                            <li data="java,python"
                                                onmouseover="MainContent_slide5_N_D_li_2_mouseover(this)"
                                                class="MainContent_slide5_N_D_li_2">
                                                <div><img src="../../img/a首页5n2.png"></div>
                                                <div>
                                                    <h3>前端工程师</h3>
                                                    <p>负责工作室团队项目前端开发 工作，包含Web网站开发与移
                                                        动端小程序或APP设计与开发。</p>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="MainContent_slide5_N_D_btn min-none">加入我们</div>


                                <div class=" MainContent_slide5_N_DS MainContent_slide5_N_D">
                                    <ul class="swiper-wrapper">
                                        <li data="1,2,3"
                                            onmouseover="MainContent_slide5_N_D_li_1_mouseover(this)"
                                            class="MainContent_slide5_N_D_li_1 swiper-slide">
                                            <div><img src="../../img/a首页5n1.png"></div>
                                            <div>
                                                <h3>后端工程师</h3>
                                                <p>负责工作室团队项目后端开发 工作，包含数据库设计与接口
                                                    设计、开发以及测试。</p>
                                            </div>
                                        </li>
                                        <li data="2,2,2"
                                            onmouseover="MainContent_slide5_N_D_li_1_mouseover(this)"
                                            class="MainContent_slide5_N_D_li_2 swiper-slide">
                                            <div><img src="../../img/a首页5n2.png"></div>
                                            <div>
                                                <h3>前端工程师</h3>
                                                <p>负责工作室团队项目前端开发 工作，包含Web网站开发与移
                                                    动端小程序或APP设计与开发。</p>
                                            </div>
                                        </li>
                                        <li data="3,3,3"
                                            onmouseover="MainContent_slide5_N_D_li_1_mouseover(this)"
                                            class="MainContent_slide5_N_D_li_2 swiper-slide">
                                            <div><img src="../../img/a首页5n2.png"></div>
                                            <div>
                                                <h3>666</h3>
                                                <p>66666 工作，666
                                                    666。</p>
                                            </div>
                                        </li>
                                    </ul>
                                    <div class="MainContent_slide5_N_D_btn">加入我们</div>
                                </div>

                                <ul class="MainContent_slide5_N_D1">
                                    <!--                                    <li style="animation-delay: 0s" class="animate__animated animate__fadeInUp">java-->
                                    <!--                                    </li>-->
                                    <!--                                    <li style="animation-delay: 0.2s" class="animate__animated animate__fadeInUp">-->
                                    <!--                                        Node.js-->
                                    <!--                                    </li>-->
                                    <!--                                    <li style="animation-delay: 0.4s" class="animate__animated animate__fadeInUp">-->
                                    <!--                                        Python-->
                                    <!--                                    </li>-->
                                </ul>

                                <ul class="MainContent_slide5_N_D2">
                                    <li style="animation-delay: 0s" class="animate__animated animate__fadeInUp">HTML5
                                    </li>
                                    <li style="animation-delay: 0.2s" class="animate__animated animate__fadeInUp">CSS3
                                    </li>
                                    <li style="animation-delay: 0.4s" class="animate__animated animate__fadeInUp">JS
                                    </li>
                                    <li style="animation-delay: 0.6s" class="animate__animated animate__fadeInUp">
                                        Vue.js
                                    </li>
                                </ul>

                            </div>


                        </div>

                    </div>
                </div>
            </div>
            <div class="swiper-pagination App_swiper-pagination" id="MainContent_slide1_pagination"></div>

        </div>
    </div>
    <div class="AdminLogin">
        <div class="AdminLogin_From animate__animated animate__fadeInUp">
            <div class="AdminLogin_From_close AdminLoginishow"></div>
            <h1>管理员登录</h1>
            <input type="text" placeholder="学号:">
            <input type="text" placeholder="密码:">
            <button>登录</button>
        </div>
    </div>

</div>
<script src="../../js/jquery_3.6.4.js"></script>
<script src="../../js/swiper-bundle.js"></script>
<script src="../../js/vue-v2.7.13.js"></script>
<script src="../../js/index.js"></script>
<script src="../../js/BrowserCompatibility.js"></script>
</body>
</html>